<template>
  <div>
    <a-card :bodyStyle="tstyle" :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline" :form="form" :selfUpdate="true">
          <a-row :gutter="12">
            <a-col :md="12" :lg="6" :sm="12" style="padding: 0;">
              <a-form-item label="咨询时间">
                <a-range-picker
                  allow-clear
                  valueFormat="YYYY-MM-DD"
                  v-decorator="['time',{ initialValue:[moment_now_date ,moment_now_date]}]"
                  @calendarChange="changeDate"
                  style="width: 100%;">
                  <a-icon slot="suffixIcon" type="calendar"/>
                </a-range-picker>
              </a-form-item>
            </a-col>

            <a-col :md="12" :lg="5" :sm="12" style="padding: 0 4px;">
              <a-form-item label="客户卡号">
                <a-input @change="clearSpace" v-decorator="['cardNo']" allow-clear placeholder="请输入卡号"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :lg="5" :sm="12" style="padding: 0 4px;">
              <a-form-item label="联系号码">
                <a-input @change="clearSpace" v-decorator="['phone']" allow-clear placeholder="请输入联系号码"/>
              </a-form-item>
            </a-col>
            <a-col :md="12" :lg="4" :sm="12" style="padding: 0 4px;">
              <a-form-item label="客户姓名">
                <a-input @change="clearSpace"  v-decorator="['name']" style="width: 100%" allow-clear placeholder="请输入客户姓名"/>
              </a-form-item>
            </a-col>

            <a-col :md="2" :lg="4" :sm="12" style="padding: 0 4px;">
              <div class="table-page-search-submitButtons g-flex" style="margin-bottom: 4px;">
                <a-icon :type="advanced ? 'up' : 'down'" @click="advanced=!advanced" style="margin-right: 15px;"/>
                <a-button type="primary" @click="clickSearch">查询</a-button>
                <a-button style="margin-left: 8px" @click="clickReset">重置</a-button>
              </div>
            </a-col>
          </a-row>
         
          <a-row :gutter="12" v-show="advanced">
            <a-col :md="12" :lg="6" :sm="12" style="padding: 0 4px;">
              <a-form-item label="信息来源">
                <a-cascader
                  allow-clear
                  :options="infoSourceList"
                  expand-trigger="hover"
                  :show-search="{ filter }"
                  v-decorator="['infoSource']"
                  placeholder="选择，搜索"
                />
              </a-form-item>
            </a-col>
            <a-col :md="12" :lg="5" :sm="12" style="padding: 0 4px;">
              <a-form-item label="主诉项目">
                <a-select
                  allow-clear
                  :showSearch="true"
                  option-filter-prop="children"
                  style="width: 100%"
                  placeholder="选择,搜索"
                  v-decorator="['mainAppealId']"
                  option-label-prop="label"
                >
                  <a-select-option v-for="item in ConsultationAppeal" :key="item.id" :label="item.name" :value="item.id" >{{ item.name }}</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :lg="5" :sm="12" style="padding: 0 4px;">
              <a-form-item label="咨询状态">
                <a-select
                  allow-clear
                  option-label-prop="label"
                  style="width: 100%"
                  v-decorator="['consultStatus']"
                  placeholder="选择">
                  <a-select-option v-for="item in consultStatusList" :key="item.id" :label="item.name" :value="item.id">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="12" :lg="4" :sm="12" style="padding: 0 4px;">
              <a-form-item label="上门状态">
                <a-select
                  allow-clear
                  option-label-prop="label"
                  style="width: 100%"
                  v-decorator="['theDoorStatus']"
                  placeholder="选择">
                  <a-select-option v-for="item in theDoorStatusList" :key="item.id" :label="item.name" :value="item.id">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
           <a-row :gutter="12" v-show="advanced">
            <a-col :md="12" :lg="6" :sm="12" style="padding: 0 4px;">
              <a-form-item label="所属咨询">
                <a-select
                  @search="select_search_consultMan"
                  :showSearch="true"
                  option-filter-prop="children"
                  allow-clear
                  option-label-prop="label"
                  style="width: 100%"
                  v-decorator="['consultMan']"
                  placeholder="选择，搜索">
                  <a-select-option v-for="item in allHisUser.userList" :key="item.id" :label="item.name" :value="item.id">{{ item.name }}</a-select-option>
                </a-select>
                <!--                <a-input v-decorator="['consultMan']" allow-clear placeholder="所属咨询"/>-->
              </a-form-item>
            </a-col>
            <a-col :md="12" :lg="5" :sm="12" style="padding: 0 4px;">
              <a-form-item label="开发人员">
                <a-select
                  @search="select_search_developer"
                  :showSearch="true"
                  option-filter-prop="children"
                  allow-clear
                  option-label-prop="label"
                  style="width: 100%"
                  v-decorator="['developer']"
                  placeholder="选择，搜索">
                  <a-select-option v-for="item in developerUser.userList" :key="item.id" :label="item.name"
                                   :value="item.id">{{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <!-- <a-col :md="12" :lg="5" :sm="12" style="padding: 0 4px;">
              <a-form-item label="客户状态">
                <a-select
                  allow-clear
                  option-label-prop="label"
                  style="width: 100%"
                  v-decorator="['customerState']"
                  placeholder="选择">
                  <a-select-option v-for="item in customerState" :key="item.id" :label="item.name" :value="item.id">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :md="12" :lg="4" :sm="12" style="padding: 0 4px;">
              <a-form-item label="客户等级">
                <a-select
                  allow-clear
                  option-label-prop="label"
                  style="width: 100%"
                  v-decorator="['customerLevel']"
                  placeholder="选择">
                  <a-select-option v-for="item in customerLevel" :key="item.id" :label="item.name" :value="item.id">
                    {{ item.name }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col> -->

            <a-col :md="2" :lg="4" :sm="12" style="padding: 0 4px;"></a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>
    <a-card :bordered="false">
      <a-button type="primary" icon="plus-circle"  @click="$refs.addNetForm.add()">新增
      </a-button>
      <a-button type="primary" icon="poweroff"  @click="$refs.addFeiyuCustomerForm.showModal()">
        获取飞鱼客户
      </a-button>
      <super-table
        bordered
        style="margin-top: -15px;"
        ref="customerNetList"
        ls_props_columns="customerNetList"
        :scroll="{x:1100,y:440}"
        :columns="columns"
        :rowKey="(record,index)=>index"
        :data="loadListData"
        :loading="loading"
        :pagination="pagination"
        :pageSize="50"
       
      >
        <template slot="index" slot-scope="text,record,index">
          <span>{{(queryParam.pageNum - 1) * queryParam.pageSize + (index + 1)}}</span>
        </template>
        <!--客户卡号-->
        <template slot="cardNo" slot-scope="text,record">
          <div class="g-flex g-y-center">
            <a class="g-f-14"  @click="toDetails(text, record)">{{ text }}</a>
            <a-tooltip placement="top">
              <template slot="title"> 复制 </template>
              <a-icon type="copy" @click="ConCopy(text)" theme="twoTone" two-tone-color="#3399ff" style="margin-left: 10px;cursor: pointer;" />
            </a-tooltip>
          </div>
        </template>
        <!--性别-->
        <template slot="sex" slot-scope="text">
          <span>{{ text == '0' ? '男' : (text == '1' ? '女' : '-')}}</span>
        </template>
        <!--咨询内容-->
        <template slot="consultCondition" slot-scope="text">
          <a-tooltip placement="bottomLeft">
            <template slot="title">{{ text }}</template>
            <span > {{ text }}</span>
          </a-tooltip>
        </template>
        <!--咨询内容-->
        <template slot="theDoorStatus" slot-scope="text">
          <span v-if="text===0">  未上门</span>
          <span v-else-if="text===1">  已上门</span>
          <span v-else>{{ text }}</span>
        </template>
        <!--操作-->
        <template slot="tags" slot-scope="text,record">
          <a-row>
            <a-col :span="12">
              <a-button class="g-bt-pad-0" type="link" @click="clickEdit(record)">编辑</a-button>
            </a-col>
            <!-- <a-col :span="12">
              <a-button class="g-bt-pad-0" type="link" @click="clickShowDialog(record)">咨询情况</a-button>
            </a-col> -->
          </a-row>
        </template>
      </super-table>

    </a-card>
    <!--新增咨询情况--弹窗-->
    <add-net-form ref="addNetForm"/>


    <!--新增飞鱼线索客户弹窗-->
    <add-feiyu-customer-form @reload="$refs.customerNetList.refresh()" ref="addFeiyuCustomerForm"/>

    <!--编辑电网咨询记录-->
    <edit-net-form @reload="$refs.customerNetList.refresh()" :row_record="current_row_record" ref="editNetForm"/>
    <!-- <div v-if="showDialog">
      <call-select :tel_arr="tel_arr" ref="CallSelect"></call-select>
    </div> -->

    <!-- 咨询情况 -->
    <edit-consulation ref="EditConsulation"></edit-consulation>

    


  </div>
</template>

<script>
import { getConsultationAppeal, netConsultationList } from '@/api/modular/main/customer/customerConsultation'
import { AllHisUser, CustomerLevel, CustomerState, getInfoSource, getUserTel } from '@/api/customer/customer'
import { dictTypeListForCode } from '@/api/modular/main/customer/customerTriage'
import addNetForm from './addNetForm'
import addFeiyuCustomerForm from './addFeiyuCustomerForm'
import editNetForm from './editNetForm'
import moment from 'moment'
import {SuperTable} from '@/components'
import CallSelect from '@/components/Phone/CallSelect'
import Bus from '@/utils/bus'
import moment_date from '@/utils/date'

import { consultStatusList,theDoorStatusList } from '@/assets/flowable/js/dw_search_list'
import EditConsulation from './editConsulation'
export default {
  components: {
    addNetForm,
    addFeiyuCustomerForm,
    editNetForm,
    SuperTable,
    CallSelect,
    // editConsulation,
    EditConsulation
  },
  data() {
    return {
      consultStatusList,
      theDoorStatusList,
      moment_now_date:moment_date.now_date,
      showDialog: false,
      tel_arr: [],//联系号码数组
      loadListData: parameter => {
        this.queryParam.pageNum = parameter.pageNum || 1
        this.queryParam.pageSize = parameter.pageSize || 10
        return netConsultationList(this.queryParam).then(res => {
          return res
        })
      },
      current_row_record: {},
      form: this.$form.createForm(this),
      allHisUser: {}, //全员员工
      developerUser:{},//所属咨询
      customerLevel: [],//客户等级
      customerState: [],//客户状态
      // 高级搜索 展开/关闭
      advanced: false,
      tstyle: {'padding-bottom': '0px', 'margin-bottom': '10px'},
      columns: [
        {title: '序号', width: 60, scopedSlots: {customRender: 'index'}, fixed: 'left'},
        {title: '客户卡号', dataIndex: 'cardNo', scopedSlots: {customRender: 'cardNo'}, width: 150, fixed: 'left'},
        {title: '客户姓名', dataIndex: 'name', width: 100},
        {title: '性别', dataIndex: 'sex', width: 80, scopedSlots: {customRender: 'sex'}},
        {title: '年龄', dataIndex: 'age', width: 60},
        {title: '来院意向', dataIndex: 'clientIntention', width: 100},
        {title: '咨询时间', dataIndex: 'record_date', width: 150},
        {title: '咨询状态', dataIndex: 'times', width: 100},


        // , customRender: consultItem => {
        //     return consultItem.join('，')
        //   },
        {
          title: '主诉项目', dataIndex: 'consultItem', width: 135,
        },
        {title: '预约时间', dataIndex: 'orderDate', width: 150},
        {title: '上门状态', dataIndex: 'theDoorStatus', scopedSlots: {customRender: 'theDoorStatus'}, width: 80,},
        {title: '咨询师', dataIndex: 'consultMan', width: 100},
        {title: '区域来源', dataIndex: 'area', width: 130},
        {title: '信息来源', dataIndex: 'infoSource', width: 120,ellipsis: true},
        {title: '咨询部门', dataIndex: 'dept', width: 100},
        {title: '搜索关键词', dataIndex: 'keyWord', width: 100},
        {title: '咨询工具', dataIndex: 'consultTool', width: 100},
        {title: '咨询内容', dataIndex: 'consultCondition',scopedSlots: { customRender: 'consultCondition' }, width: 150},
        {title: '来源网站', dataIndex: 'sourceWebsite', width: 100,ellipsis: true},
        {title: '来源地址', dataIndex: 'keyWebsite', width: 100,ellipsis: true},
        {title: '开发员', dataIndex: 'developer', width: 100},
        {title: '操作', scopedSlots: {customRender: 'tags'}, fixed: 'right', width: 80},
      ],
      data: [],
      ConsultationAppeal : [],
      infoSourceList: [],//消息来源
      pagination: {
        pageSizeOptions: ['50', '100', '150','200'],//这里注意只能是字符串，不能是数字     
      },
      // 查询参数
      queryParam: {
        pageNum: 1,//第几页
        pageSize: 20,//每页中显示数据的条数
        name: undefined, //姓名
        age: undefined, //性别
        card_no: undefined, //卡号
        consultTimeStart: undefined,
        consultTimeEnd: undefined
      },
      loading: true, //加载状态
    }
  },
  created() {
    //钩子方法
    // this.getList()
     // dictTypeListForCode  AllHisUser  所属咨询
    dictTypeListForCode({code:"XCZXS"}).then((res) => {
      // console.log('全员员工接口',res)
      this.allHisUser = res
    })
    // 开发人员 
     dictTypeListForCode({code:"WLZXS"}).then((res) => {
      // console.log('全员员工接口',res)
      this.developerUser = res
    })
    CustomerLevel().then(res => {
      this.customerLevel = res
    })
    CustomerState().then(res => {
      this.customerState = res
    })
    getInfoSource().then(res => {
      this.infoSourceList = res
    })
    getConsultationAppeal().then(res => {
      this.ConsultationAppeal = res.data
    })
  },
  mounted() {
    Bus.$on('hangup', () => {
      this.showDialog = false
    })
  },
  methods: {
    clearSpace(e){
      e.target.value=e.target.value.replace(/\s+/g,'')
    },
    clickShowDialog(record) {
      this.$refs.EditConsulation.add()
      // this.showDialog = true
      // this.$nextTick(() => {
      //   this.queryTelNumber(record)
      // })
    },
    queryTelNumber(record) {
      console.log(record)
      const id = record.customerId
      getUserTel(id).then(res => {
        console.log('电话号码：', res)
        this.tel_arr = res.data
        this.$refs.CallSelect.show()
      })
    },
    filter(inputValue, path) {
      return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
    },
    clickEdit(reocrd) {
      console.log(reocrd)
      this.current_row_record = reocrd
      this.$refs.editNetForm.add()
    },
    //点击查看客户详情
    toDetails(text, record) {
      // console.log(record)
      this.$router.push({
        path: 'customer_details', query: {
          id: record.customerId,
          card_no: record.cardNo,
          customerName:record.name
        }
      })
    },
    checkSpace(val){
      if(val){
        return val.trim()
      }
      return val
    },
    checkPattern(str) {
      const pattern = new RegExp('[\u4E00-\u9FA5]+')
      if (pattern.test(str)) {
        return true
      }
      return false
    },
    //下拉框搜索查找
    select_search_consultMan(value) {
      this.form.setFieldsValue({
        consultMan: value
      })
    },
    //下拉框搜索查找
    select_search_developer(value) {
      this.form.setFieldsValue({
        developer: value
      })
    },
    moment,
    /**
     * 日期改变
     */
    changeDate(date){
      console.log(date)
    },
    /**
     * 约束结束日期
     */
    disabledDate(current){

      const time = this.form.getFieldValue('time')

      const start = time[0]
      const end = time[1]
      return false
      if (!time) {
        return false
      }
      console.log('222',current,moment().add(-1, 'd'),start.valueOf())
      return current < moment_date.now_after_week(end)
      return start.valueOf() <= moment_date.now_after_week(end)
    },
    //点击查询-高级搜索
    clickSearch() {
      const form_values = this.form.getFieldsValue()
      form_values.name = this.checkSpace(form_values.name)
      const time = form_values.time
      if (time && time.length > 0) {
        form_values.consultTimeStart = moment(time[0]).format('YYYY-MM-DD')
        form_values.consultTimeEnd = moment(time[1]).format('YYYY-MM-DD')
        form_values.time=undefined
      }
      /**下拉框搜索**/
      const tempConsultManFlag = this.checkPattern(form_values.consultMan)
      const tempdeveloperFlag = this.checkPattern(form_values.developer)

      let tempConsultManValue
      let tempdeveloperValue

      if (tempConsultManFlag) {
        const obj = this.allHisUser.userList.filter(item => form_values.consultMan == item.name)[0]
        tempConsultManValue = form_values.consultMan
        form_values.consultMan = obj ? obj.id : tempConsultManValue
      }
      if (tempdeveloperFlag) {
        const obj = this.allHisUser.userList.filter(item => form_values.developer == item.name)[0]
        tempdeveloperValue = form_values.developer
        form_values.developer = obj ? obj.id : tempdeveloperValue
      }
      //信息来源
      this.queryParam = { ...this.queryParam,...form_values }
      const infoSource = this.queryParam.infoSource
      if(infoSource){
        this.queryParam.infoSource=form_values.infoSource[form_values.infoSource.length-1]
      }
      this.$refs.customerNetList.refresh(true)
      setTimeout(() => {
        if (tempConsultManFlag) {
          this.form.setFieldsValue({
            consultMan: tempConsultManValue
          })
        }
        if (tempdeveloperFlag) {
          this.form.setFieldsValue({
            developer: tempdeveloperValue
          })
        }
      }, 500)
    },
    clickReset() {
      this.form.resetFields()
      this.queryParam={}
      this.queryParam.pageSize=10
      this.queryParam.pageNum=1
      this.moment_now_date=undefined
      this.queryParam.consultTimeEnd=undefined
      this.queryParam.consultTimeStart=undefined

    },
    //获取客户列表
    getList() {
      this.loading = true
      netConsultationList(this.queryParam).then(res => {
        console.log("电网咨询数据",res)
        this.data = res.rows
        this.pagination.total = parseInt(res.total)
        this.loading = false
      })
    },
  
   
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    toAddNetCusomer() {
      this.$router.push({path: '/addCustomerNetConsulation'})
    }
  }

}
</script>

<style lang="less" scoped>
.table-operator {
  margin-bottom: 18px;
}

button {
  margin-right: 8px;
}
</style>